import { Component } from 'react';
import { history } from 'umi';
import { Button, WhiteSpace, List } from 'antd-mobile';
import './index.less';

import SettingIcon from '@/assets/svg/setting.svg';
import BookIcon from '@/assets/svg/book.svg';
import HistoryIcon from '@/assets/svg/history.svg';

const UnLoginIcon = require('@/assets/images/def-photo.png');
const LoginIcon = require('@/assets/images/train-photo.png');

export default class Me extends Component {
  state = {
    isLogin: true,
  };

  handlePersonClick = () => {
    if (this.state.isLogin) {
      history.push('/me/person');
    } else {
      history.push('/login');
    }
  };

  render() {
    return (
      <div className="me_wrapper">
        <div className="person_wrapper">
          <img
            src={this.state.isLogin ? LoginIcon : UnLoginIcon}
            className="photo_img"
            onClick={this.handlePersonClick}
          />
          {this.state.isLogin ? (
            <span className="login_name">汪**</span>
          ) : (
            <span className="unlogin_name">未登录</span>
          )}
        </div>
        <div className="me_tools">
          <List>
            <List.Item
              thumb={HistoryIcon}
              arrow="horizontal"
              onClick={() => {}}
            >
              历史记录
            </List.Item>
            <List.Item thumb={BookIcon} arrow="horizontal" onClick={() => {}}>
              我的课程
            </List.Item>
            <List.Item
              thumb={SettingIcon}
              onClick={() => {}}
              arrow="horizontal"
            >
              设置
            </List.Item>
          </List>
        </div>

        <div
          className="my_footer"
          style={{
            display: this.state.isLogin ? 'block' : 'none',
          }}
        >
          <Button type="warning">退出登录</Button>
          <WhiteSpace />
        </div>
      </div>
    );
  }
}
